<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
	<title>来拍车App-抽奖页面</title>
	<link rel="stylesheet" href="{:get_style_cdnurl()}app/css/common.css">
	<link rel="stylesheet" href="{:get_style_cdnurl()}app/activities/chengjiao/lottery.css">
	<script src="{:get_style_cdnurl()}paimai/cheshan/js/TGJSBridge.js" type="text/javascript"></script>
	<script src="{:get_style_cdnurl()}paimai/cheshan/js/appclient.js" type="text/javascript"></script>
	</head>
<body class="lottery-body">
	<div class="lottery">
		<img src="{:get_style_cdnurl()}app/activities/chengjiao/lottery-bg.jpg" alt="">
		<div class="lottery-inner">
			<img src="{:get_style_cdnurl()}app/activities/chengjiao/lottery-bg2.png" alt="" class="lottery-bg2">
			<img src="{:get_style_cdnurl()}app/activities/chengjiao/lottery.png" class="lottery-rotate" id="lottery-rotate">
			<img src="{:get_style_cdnurl()}app/activities/chengjiao/lottery-btn.png" class="lottery-btn" alt="">
		</div>
	</div>
	<div class="activity-rule">
		<h2>活动规则</h2>
    <p class="rule-detail">1. 活动时间：{$starttime}-{$endtime}。</p>
    <p class="rule-detail">2. 活动城市：北京、上海、天津、重庆、成都、杭州、苏州。</p>
    <p class="rule-detail">3. 活动期间，在来拍车确认成交的车辆，可获得1次抽奖机会，抽奖中奖率100%。</p>
    <p class="rule-detail">4. 在交易中心的“买到的车-交易成功”中，点击“成交抽奖”进行抽奖。</p>
    <p class="rule-detail">5. 奖项设置包括100元、300元、500元、1000元和2000元。</p>
    <p class="rule-detail">6. 奖项将以代金券形式发放，100元、300元和500元分别对应等值代金券1张，1000元包含2张面额500元代金券，2000元包含4张面额500元代金券。</p>
    <p class="rule-detail">7. 在资产中心的“我的代金券”中，可以查看抽奖获得的代金券。在有效期内，代金券可以在支持使用的拍单上使用。</p>
	</div>
  
  <div class="popup-box-shadow"></div>
	<div class="popup-box">
		<!-- <h2>恭喜</h2> -->
		<div class="content">
			<h3>您已抽中<span class="money">2000</span>元大奖!</h3>
      <p>请到“资产中心-我的代金券”查看</p>
			<!-- <p class="desc">该现金券已经自动抵扣车款，可查看费用明细进行核实。</p> -->
      <table id="coupon_list">
        
      </table>
			<span class="btn">确定</span>
		</div>
	</div>
  <div class="statement">
    活动最终解释权归世纪车来车往(北京)网络科技有限公司
  </div>
	<input type="hidden" id='order_id' value="{$order_id}">
	<script type="text/javascript" src="{:get_style_cdnurl()}app/js/jquery.min.js"></script>
	<script type="text/javascript" src="{:get_style_cdnurl()}app/js/jQueryRotate.2.2.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$(".popup-box-shadow").height($(document).height());
		var prizeArr = [100, 2000, 1000, 500, 300];
		$(".lottery-btn").on("click", function(e){
			lottery();
			e.stopPropagation();
		});

		$("body, span.btn").on("click", function(e){
			if ($(this).hasClass('btn')) {
				$("#lottery-rotate").rotate(0); // 重置到初始位置
			};
			$(".popup-box, .popup-box-shadow").hide();
			$("body").off("touchmove");
		});

		function lottery(){
				var order_id = $("#order_id").val();
			    $.ajax({ 
			       	type: 'POST', 
			       	url: '/Raffle/get_face_value', 
			       	data:{order_id:order_id,type:2},
			       	dataType: 'json', 
			       	cache: false, 
			       	error: function(){
			       		appClient.toast('出错了！');
			           // alert('出错了！'); 
			           return false; 
			       	}, 
			        success:function(data){
				       	if (data.code ==200) {
			       			$(".lottery-btn").off("click");
							var moneyNum = Number(data.data.total_price);
							var randomValue = Math.floor(Math.random()*20);
							var endAngle = $.inArray(moneyNum, prizeArr)*36 + 10 + randomValue - 20;
							$("#lottery-rotate").rotate({ 
				        		angle:0,
								animateTo:endAngle+1800,
								duration:8000,
						        callback: function(){
						        	showPopbox(moneyNum,data.data.list)
							        $(".lottery-btn").on("click", lottery);
						        } 
				      		}); 
				       	}else if (data.code ==201) {
				       		appClient.toast(data.msg);
				       		// alert(data.msg);
				       	}else{
				       		appClient.toast(data.msg);
				       		// alert(data.msg);
				       	}
				    }
	    		}); 
		} 

		function showPopbox(moneyNum,list){
			$(".popup-box .money").text(moneyNum);
			$(".popup-box, .popup-box-shadow").show();
			$("body").on("touchmove", function(e){
		        e.preventDefault();
		      });
			var htmlstr = "";
		    $.each(list,function(i,item){
		        htmlstr += "<tr><td>代金券"+ item.name + "</td><td>" + Number(item.value) + "元</td></tr>";
		      });
		    $("#coupon_list").html(htmlstr);
	    	$(".popup-box").show();
		}
	});
	</script>
</body>
</html>